<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Spirit</title>

    <link rel="stylesheet" href="./fonts/font_4801120_gca0y8g4fbe/iconfont.css">
    <!-- 引入boostrapcss文件 -->
    <link rel="stylesheet" href="./css/bootstrap.min.css" />

    <!-- animation 动画库 -->
    <link rel="stylesheet" href="./css/animate.min.css" />
    <!-- Swiper轮播图效果引入 -->
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">

    <!-- 引入页面样式重置的css文件 -->
    <link rel="stylesheet" href="./css/reset.css" />

    <!-- 引入我们自己写的css样式文件 -->
    <link rel="stylesheet/less" href="./css/index.css" />

    <style>
        html,
        body {
            position: relative;
            height: 100%;
        }

        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .swiper-container {
            width: 100%;
            height: 100%;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
    </style>
</head>

<body>
    <!-- 头部 -->
    <nav class="navbar-top navbar navbar-default">
        <div class="top container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="top-container navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#"><img src="./images/logo.png" alt=""></a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="nav-list-container collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav-list nav navbar-nav">
                    <li><a href="#" class="wow bounceInDown" data-wow-delay="100ms">SHOP</a></li>
                    <li><a href="#" class="wow bounceInDown" data-wow-delay="150ms">TEAM</a></li>
                    <li><a href="#" class="wow bounceInDown" data-wow-delay="200ms">EVENTS</a></li>
                    <li><a href="#" class="wow bounceInDown" data-wow-delay="250ms">EXPERIENCE</a></li>
                    <li><a href="#" class="wow bounceInDown" data-wow-delay="300ms">COMPANY</a></li>
                    <li><a href="#" class="wow bounceInDown" data-wow-delay="350ms">CONTACT</a></li>
                </ul>

                <ul class="nav-iconlist-container nav navbar-nav navbar-right">
                    <li class="iconfont ">&#xe9d6;</li>
                    <li class="iconfont ">&#xe9d5;
                        <span class="glyphicon glyphicon-euro">
                            0</span>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>


    <!-- run over -->
    <div class="run-over swiper mySwiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="./images/bg1.png" alt="">
                <div class="details rubberBand" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s"
                    swiper-animate-delay="0.3s">SEE DETAILS</div>
            </div>
            <div class="swiper-slide">
                <img src="./images/bg2.png" alt="">
                <div class="details rubberBand" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s"
                    swiper-animate-delay="0.3s">SEE DETAILS</div>
                <div class="swiper-button-prev"></div>
            </div>
            <div class="swiper-button-next"></div>
        </div>
    </div>

    <!-- snowboards -->
    <div class="snowboards">

        <div class="snowboards-title">snowboards</div>
        <p class="desc1">Aliquam erat volutpat. Curabitur ut consequat arcu eget laoreet est</p>
        <span class="cheng">×</span>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="./images/board1.jpeg" alt=""></div>
                <div class="swiper-slide"><img src="./images/board2.jpeg" alt=""></div>
                <div class="swiper-slide"><img src="./images/board3.jpeg" alt=""></div>
                <div class="swiper-slide"><img src="./images/board4.jpeg" alt=""></div>
                <div class="swiper-slide"><img src="./images/board5.jpeg" alt=""></div>
                <div class="swiper-slide"><img src="./images/board1.jpeg" alt=""></div>
                <div class="swiper-slide"><img src="./images/board2.jpeg" alt=""></div>
                <div class="swiper-slide"><img src="./images/board3.jpeg" alt=""></div>
                <div class="swiper-slide"><img src="./images/board4.jpeg" alt=""></div>
                <div class="swiper-slide"><img src="./images/board5.jpeg" alt=""></div>
            </div>



        </div>

        <!-- Swiper JS -->
        <script src="./js/swiper-bundle.min.js"></script>

        <!-- Initialize Swiper -->
        <script>
            var swiper = new Swiper('.swiper-container', {
                slidesPerView: 5,
                spaceBetween: 0,
                slidesPerGroup: 1,
                loop: true,
                loopFillGroupWithBlank: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            });
        </script>
        <p class="desc2">Snowboard extreme Series</p>

    </div>
    <!-- mountains-snowboarding -->
    <div class="mountains-snowboarding">
        <img src="./images/bg3.png" alt="">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt auctor facilisis. Nam massa dui,
            imperdiet et
            mi ut, sagittis viverra odio. Duis et lectus eu enim gravida vulputate nec eget nisi. Nunc ultrices velit
            blandit,
            dapibus lacus in, feugiat erat. Donec non porttitor augue, sit amet lacinia purus. Nulla fringilla quam est,
            luctus
            dapibus odio suscipit ut. Vivamus et lectus a nunc fringilla volutpat. Morbi sed congue sem.</p>
        <p>Aliquam erat volutpat. Curabitur ut consequat arcu, eget laoreet est. Vivamus semper nibh sit amet libero
            hendrerit
            luctus. Fusce non bibendum lorem. Fusce laoreet risus eget tortor lobortis egestas. Etiam tempus quam sed
            felis viverra
            scelerisque. Integer fringilla libero risus, vel euismod turpis auctor ac. Proin elementum aliquet libero a
            dapibus.
            Mauris et tempor dolor.</p>
    </div>

    <!-- Features -->
    <div class="features">
        <div class="container">
            <h1>Features</h1>
            <span>×</span>
            <div class="features-img-container">
                <div>
                    <img src="./images/features1.png" alt="">
                    <p>Born Identity: Bringing Burton Hardgoods to Life</p>
                </div>
                <div>
                    <img src="./images/features2.png" alt="">
                    <p>Jeremy Jones: On That Street Grind</p>
                </div>
                <div>
                    <img src="./images/features3.png" alt="">
                    <p>Burton’s Tokyo Rail Days Recap</p>
                </div>
                <div>
                    <img src="./images/features4.png" alt="">
                    <p>Burton’s Tokyo Rail Days Preview</p>
                </div>
            </div>
        </div>

    </div>

    <!-- footer -->
    <div class="footer">
        <!-- footer-container-top -->
        <div class="footer-container-top">
            <div class="products">
                <h1>Products</h1>
                <ul>
                    <li>Mens</li>
                    <li>Womens</li>
                    <li>Youth</li>
                </ul>
            </div>

            <div class="about">
                <h1>About</h1>
                <ul>
                    <li>Careers and Internships</li>
                    <li>Sponsorships</li>
                    <li>team</li>
                    <li>Catalog Request/Download</li>
                </ul>
            </div>

            <div class="customer">
                <h1>Customer Support</h1>
                <ul>
                    <li>Contact Us</li>
                    <li>Shipping and Order Tracking</li>
                    <li>Easy Returns</li>
                    <li>Warranty</li>
                    <li>Replacement Binding Parts</li>
                </ul>
            </div>

            <div class="newsletter">
                <h1>Newsletter</h1>

                <div class="email row">
                    <div class="email-son col-lg-6">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Enter your email">
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button">Go</button>
                            </span>
                        </div><!-- /input-group -->
                    </div><!-- /.col-lg-6 -->
                </div><!-- /.row -->

                <div class="icon-imgs">
                    <span><img src="./images/font1.png" alt=""></span>
                    <span><img src="./images/font2.png" alt=""></span>
                    <span><img src="./images/font3.png" alt=""></span>
                    <span><img src="./images/font4.png" alt=""></span>
                    <span><img src="./images/font5.png" alt=""></span>
                </div>
            </div>
        </div>

        <div class="footer-container-bottom">
            <span>© 2014 Mountains Snowboards</span>
            <span><img src="./images/usa.png" alt="">Change Region</span>
        </div>
        <!-- </div> -->
    </div>
</body>

</html>
<!-- 引入jquery -->
<script src="./js/jquery.min.js"></script>

<!-- 引入bootstrap js文件  -->
<script src="./js/bootstrap.min.js"></script>

<!-- 引入less的编译器 -->
<script src="./js/less.min.js"></script>

<!-- 引入懒加载动画脚本 -->
<script src="./js/wow.min.js"></script>

<script src="./fonts/font_4801120_gca0y8g4fbe/iconfont.js"></script>

<!-- 引入Swiper轮播图 -->
<script src="./js/swiper-bundle.min.js"></script>
<!-- 初始化Swiper。 -->
<script>
    var swiper = new Swiper(".mySwiper", {
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });      
</script>

<!-- 引入Swiper Animate动画效果 -->
<script src="./js/swiper.animate1.0.3.min.js"></script>



<script>
    // 初始化这个插件
    new WOW().init()
</script>